import React from 'react'
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Radio, Modal, Message, Upload, DatePicker, InputNumber, Transfer } from 'antd';
import api from '../../../api/communityHouseUser';
import { uuid } from "../../../utils";
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
import moment from 'moment';


import PanelBox from '../../../components/PanelBox';
import { INTERFACE_CORE_URL } from '../../../api/config';
import CommunityCascader from '../../Cascader/CommunityCascader';


import './index.less'


class EditForm extends React.Component {
  state = {
    sumitLoad: false,
    children: [],
    photoUrl: '',
    userSession:'',

  };

  componentWillReceiveProps(nextProps) {
    if (this.props.clearForm != nextProps.clearForm && nextProps.clearForm == false) {
      this.props.form.resetFields();
    }

  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(values.houseId && values.houseId.length>0){
          values.houseId=values.houseId[values.houseId.length-1];
        }
        this.setState({
          sumitLoad: true
        });
        if (values.id) {
          this.update(values);
        } else {
          this.add(values);
        }

      }
    });
  }
  update = (values) => {
    api.put('/communityUser/update', { ...values }).then((data) => {
      const result = data.data;
      if (result.code == 0) {
        Message.success('修改成功！');
        const { close, refeshData } = this.props;
        refeshData();
        close();
      } else {
        Message.error(result.message);
      }
      this.setState({
        sumitLoad: false
      });
    });
  }
  add = (values) => {
    delete values.id;
    api.post('/communityUser/add', { ...values }).then((data) => {
      const result = data.data;
      if (result.code == 0) {
        Message.success('添加成功！');
        const { close, refeshData } = this.props;
        refeshData();
        close();
      } else {
        Message.error(result.message);
      } 
      this.setState({
        sumitLoad: false
      }); 
    });
  }

  //选择级联
  validLoginCommunityRule = (rule, value, callback) => {
    
    const formData = this.props.form.getFieldsValue();
     //处理连级
     if(formData.houseId.length<4){
        callback('至少选择到房间!');
     }else{
        callback();
     }
  }
  componentDidMount = () =>{
    let userSession =this.props.userSession;
    this.setState({
      userSession:userSession,
      });
  }

  styleTailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 14,
        offset: 0,
      },
      sm: {
        span: 14,
        offset: 6,
      },
    },
  };
  styleFormItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };



  render() {
    const { getFieldDecorator, resetFields } = this.props.form;
    const { close, refeshData, callbackParent } = this.props;
    callbackParent({
      resetFields: resetFields,
    });
    const record = this.props.rowRecord;

    const formItemLayout = this.styleFormItemLayout;
    const tailFormItemLayout = this.styleTailFormItemLayout;
   
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          {getFieldDecorator('id', {
            initialValue: record ? record.id : ''
          })(
            <Input type="hidden" />
            )}
          {record?
          <FormItem
            {...formItemLayout}
            label="选择房间"
            hasFeedback
          >
            {getFieldDecorator('houseName', {
              rules: [{ required: true, message: '房间不能为空!' }],
              initialValue: record.houseName 
            })(
              <Input disabled={true}/>
              )}
          </FormItem>
          :
          <FormItem
            {...formItemLayout}
            label="选择房间"
            hasFeedback
          >
            {getFieldDecorator('houseId', {
             rules: [
                { type: "array", required: true, message: '房间不能为空!' },
                { validator: this.validLoginCommunityRule}],
            initialValue: record.houseId 
            })(
              <CommunityCascader changeOnSelect={false}  className="community-cascader" placeholder="请选择房间"  maxLevel="4"  pid={this.props.userSession.officeId}  />
              )}
          </FormItem>
          }
          <FormItem
            {...formItemLayout}
            label="姓名"
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '姓名不能为空!' }],
              initialValue: record ? record.name : ''
            })(
              <Input placeholder="请输入姓名" /> 

              )}
          </FormItem>

          <FormItem
          {...formItemLayout}
          label="联系电话"
        >
          {getFieldDecorator('mobile', {
            rules: [{ required: true, message: '电话不能为空!' }],
            initialValue:record?record.mobile:''
          })(
            <Input addonBefore="+86"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="状态"
        >
            {getFieldDecorator('state', {
                rules: [{ required: true, message: '不能为空!' }],
                initialValue:record ? record.state  : 1
              })(
            <RadioGroup name="state" >
              <Radio value={0}>禁用</Radio>
              <Radio value={1}>启用</Radio>
            </RadioGroup>
           )}
      </FormItem>
         
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" size="large" style={{ marginRight: '10px' }}>提交</Button>
          <Button onClick={close}>取消</Button>

        </FormItem>
        </Form>

      </div>
    );
  }
}

const WrappedEditForm = Form.create()(EditForm);
export default WrappedEditForm
